/**
 * 货品列表显示
 */

import { Button, Form, Input, message, Modal, Table } from "antd"
import { ItemBox } from "../../style"
import { ColumnsType } from "antd/es/table"
import { useCallback, useEffect, useState } from "react"
import { getGbSystemSetGoodsList, IgoodsType, postGbSystemSetAddGoods, postGbSystemSetDeleteGoods, postGbSystemSetUpdateGoods } from "../../api"
import { handleDeleteAssets } from "../../../../../assets/fun/Antd/deleteFun"
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider"



const GoodsList = () => {
    const [listData,setListData] = useState<IgoodsType[]>([])
    const [oneShow,setOneShow] = useState(false)
    const [goodsName,setGoodsName] = useState<IgoodsType>()
    const [form] = Form.useForm();
    const listFun = useCallback(async ()=>{
        // 数据获取
        const { code, msg, data } = (await getGbSystemSetGoodsList()) as {
            code: number;
            msg: string;
            data: IgoodsType[];
          };
          if (code === 20000) {
            setListData(data)
          } else {
            message.error(msg);
          }
    },[])

    useEffect(()=>{
        listFun()
    },[listFun])

    const columns: ColumnsType<IgoodsType> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => <span>{ index + 1}</span>
        },
        {
            title: "名称",
            align: "center",
            dataIndex: "goodName",
        },
        {
            title: "操作",
            align: "center",
            render: (text, record, index) => {
                return(
                    <>
                        <Button type="link" onClick={() => {
                            setGoodsName(record)
                            setOneShow(true)
                            form.setFieldsValue({goodName: record.goodName})
                        }}>编辑</Button>
                        <Button type="link" onClick={() => {
                            handleDelete(record.id)
                        }}>删除</Button>
                    </>
                )
            }
        }
    ]

    const handleOk = async () => {
        if (goodsName) {
            const values = await form.validateFields()
            const { code, msg } = (await postGbSystemSetUpdateGoods({
                ...values,
                id: goodsName.id,
            })) as {
                code: number
                msg: string
            }
            if (code === 20000) {
                setOneShow(false)
                message.success("编辑成功")
                form.resetFields()
                listFun()
                setGoodsName(undefined)
            } else {
                message.error(msg)
            }
        }else{
            const values = await form.validateFields()
            const { code, msg } = (await postGbSystemSetAddGoods({
                ...values,
            })) as {
                code: number
                msg: string
            }
            if (code === 20000) {
                setOneShow(false)
                message.success("添加成功")
                form.resetFields()
                setGoodsName(undefined)
                listFun()
            } else {
                message.error(msg)
            }
        }
    }

    const handleCancel = () => {
        setOneShow(false)
        form.resetFields()
        setGoodsName(undefined)
    }

    const handleDelete = (value?: number) => {
        handleDeleteAssets(
            async () => {
                return (await postGbSystemSetDeleteGoods({ id: value })) as {
                    code: number;
                    msg: string;
                };
            },
            () => {
                listFun();
            }
        );
    };

    return(
        <>
            <ItemBox style={{ marginBottom: '2rem',width:'100%'}}>
                <div className="item-title">
                    <div>货品列表</div>
                    <Button type="link" onClick={() => {
                        setOneShow(true)
                    }}>+添加货品</Button>
                </div>
                <div className="item-main">
                    <Table
                        dataSource={listData}
                        columns={columns}
                        pagination={false}
                        rowKey="id"
                        />
                </div>
            </ItemBox>
            <Modal
                width={useWindowFontSize(450)}
                title={"添加货品"}
                open={oneShow}
                onOk={handleOk}
                onCancel={handleCancel}
                getContainer={false}
            >
                <Form form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    labelAlign="left"
                >
                    <Form.Item
                        label="货品名称"
                        name="goodName"
                        rules={[{ required: true, message: "请填写货品名称!" }]}
                    >
                        <Input
                            placeholder="请填写货品名称"
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default GoodsList